<template>
  <div class="report_table">
    <div class="report_title">金帆高清录制技术质量奖申报表</div>
    <div class="apply_video">
      <span>申报单位:</span>
      <a-input v-model="reportData.orgName" />
      <span>广播电视台</span>
    </div>
    <div class="table">
      <div class="row">
        <div class="label">申报奖项类别</div>
        <div class="value">
          <a-radio-group v-model="reportData.sbjxlb">
            <a-radio :value="1"> 1、新闻 </a-radio>
            <a-radio :value="2"> 2、专题 </a-radio>
            <a-radio :value="3"> 3、综合文体 </a-radio>
            <a-radio :value="4"> 4、片头 </a-radio>
          </a-radio-group>
        </div>
      </div>
      <div class="row">
        <div class="label">录制单位</div>
        <div class="value transcribe_unit">
          <a-input v-model="reportData.lzDeptName" />
          <span>电视台</span>
          <a-input v-model="reportData.lzOrgName" />
          <span>部</span>
        </div>
      </div>
      <div class="small_row">
        <div class="left_box">申报材料</div>
        <div class="right_box">
          <div class="row_item">
            <div class="col">
              <div class="col_label">节目标题</div>
              <div class="col_value">
                <a-input v-model="reportData.title" />
              </div>
            </div>
            <div class="col">
              <div class="col_label">入库盘卡编号</div>
              <div class="col_value">
                <a-input v-model="reportData.rkpkbh" />
              </div>
            </div>
          </div>
          <div class="row_item">
            <div class="col">
              <div class="col_label">节目长度</div>
              <div class="col_value">
                <a-input
                  oninput="if(value.length>8) value=value.slice(0,8)"
                  v-model.number="reportData.jmcdMin"
                  type="number"
                />
                <span>分</span>
                <a-input
                  oninput="if(value.length>8) value=value.slice(0,8)"
                  v-model.number="reportData.jmcdSec"
                  type="number"
                />
                <span>秒</span>
              </div>
            </div>
            <div class="col">
              <div class="col_label">录制版次</div>
              <div class="col_value">
                <a-input v-model="reportData.lzbc" />
              </div>
            </div>
          </div>
          <div class="row_item">
            <div class="col">
              <div class="col_label">首播单位</div>
              <div class="col_value">
                <a-input v-model="reportData.sbdw" />
                <span>电视台</span>
              </div>
            </div>
            <div class="col">
              <div class="col_label">首播日期</div>
              <div class="col_value">
                <a-input
                  oninput="if(value.length>4) value=value.slice(0,4)"
                  v-model.number="reportData.sbrqn"
                  type="number"
                />
                <span>年</span>
                <a-input
                  oninput="if(value.length>2) value=value.slice(0,2)"
                  v-model.number="reportData.sbrqr"
                  type="number"
                />
                <span>月</span>
                <a-input
                  oninput="if(value.length>2) value=value.slice(0,2)"
                  v-model.number="reportData.sbrqy"
                  type="number"
                />
                <span>日</span>
              </div>
            </div>
          </div>
          <div class="row_item">
            <div class="col">
              <div class="col_label">录像机型号</div>
              <div class="col_value">
                <a-input v-model="reportData.lxjxh" />
              </div>
            </div>
            <div class="col">
              <div class="col_label">录制日期</div>
              <div class="col_value">
                <a-input
                  oninput="if(value.length>4) value=value.slice(0,4)"
                  v-model.number="reportData.lzrqn"
                  type="number"
                />
                <span>年</span>
                <a-input
                  oninput="if(value.length>2) value=value.slice(0,2)"
                  v-model.number="reportData.lzrqr"
                  type="number"
                />
                <span>月</span>
                <a-input
                  oninput="if(value.length>2) value=value.slice(0,2)"
                  v-model.number="reportData.lzrqy"
                  type="number"
                />
                <span>日</span>
              </div>
            </div>
          </div>
          <div class="row_item">
            <div class="col">
              <div class="col_label">摄像机型号</div>
              <div class="col_value">
                <a-input v-model="reportData.sxjxh" />
              </div>
            </div>
            <div class="col">
              <div class="col_label">录制方式</div>
              <div class="col_value">
                <a-input v-model="reportData.lzfs" />
              </div>
            </div>
          </div>
          <div class="row_item">
            <div class="col">
              <div class="col_label"></div>
              <div class="col_value"></div>
            </div>
            <div class="col">
              <div class="col_label">填表人</div>
              <div class="col_value">
                <a-input v-model="reportData.tbr" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="larger_row">
        <div class="larger_label">主要完成人员</div>
        <div class="zyry">
          <div style="width: 30%; display: flex; align-content: center">
            灯光：
          </div>
          <a-textarea
            v-model="reportData.zywcrDg"
            style="width: 100%"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </div>
        <div class="zyry">
          <div style="width: 30%; display: flex; align-content: center">
            视频：
          </div>
          <a-textarea
            v-model="reportData.zywcrSp"
            style="width: 100%"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </div>
        <div class="zyry">
          <div style="width: 30%; display: flex; align-content: center">
            音频：
          </div>
          <a-textarea
            v-model="reportData.zywcrYp"
            style="width: 100%"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </div>
      </div>
      
      <!-- <div class="larger_row">
        <div class="larger_label">申报单位</div>
        <div class="larger_value cloum_value">
          <div class="sign_box">
            <span>台分管主管(签字)：</span>
            <a-input
              style="background: #fff"
              disabled
              class="input11"
              v-model="reportData.chargeSign"
            />
          </div>
          <div class="time_box">
            <span class="margin20">(台章)</span><br />
            <a-input
              style="background: #fff"
              disabled
              v-model.number="reportData.signYear"
              type="number"
            />
            <span>年</span>
            <a-input
              style="background: #fff"
              disabled
              v-model.number="reportData.signMonth"
              type="number"
            />
            <span>月</span>
            <a-input
              style="background: #fff"
              disabled
              v-model.number="reportData.signDay"
              type="number"
            />
            <span>日</span>
          </div>
        </div>
      </div>
      <div class="larger_row">
        <div class="larger_label">
          省局
          <br />
          评奖工作组
          <br />
          初审意见
        </div>
        <div class="larger_value cloum_value">
          <div class="sign_box1">
            <a-textarea
              style="background: #fff"
              disabled
              class="textarea"
              v-model="reportData.option"
            />
          </div>
          <div class="time_box">
            <span class="margin21">(章)</span><br />
            <a-input
              style="background: #fff"
              disabled
              v-model.number="reportData.optionYear"
              type="number"
            />
            <span>年</span>
            <a-input
              style="background: #fff"
              disabled
              v-model.number="reportData.optionMonth"
              type="number"
            />
            <span>月</span>
            <a-input
              style="background: #fff"
              disabled
              v-model.number="reportData.optionDay"
              type="number"
            />
            <span>日</span>
          </div>
        </div>
      </div>
      <div class="larger_row">
        <div class="larger_label">备注</div>
        <div class="larger_value">
          <a-textarea
            disabled
            v-model="reportData.remark"
            style="width: 100%; background: #fff"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </div>
      </div> -->
    </div>
    <a-alert message="请注意:填写完申请后打印并盖章在附件列表上传" type="warning" />
  </div>
</template>

<script>
export default {
  name: "ReportTable",
  data() {
    return {
      reportData: {
        // company: "", // 申请单位
        sbjxlb: "", // 奖项类别
        lzDeptName: "", // 录制单位
        lzOrgName: "", // 录制部门
        // programTitle: "", // 节目标题
        // programCode: "", // 入库盘卡编号
        jmcdMin: "", // 节目长度--分
        jmcdSec: "", // 节目长度--秒
        // edition: "", // 录制版次
        // firstUnit: "", // 首播单位
        sbrqn: "", // 首播时间--年
        sbrqr: "", // 首播时间--月
        sbrqy: "", // 首播时间--日
        // VCRType: "", // 录像机型号
        lzrqn: "", // 录制时间--年
        lzrqr: "", // 录制时间--月
        lzrqy: "", // 录制时间--日
        // vidiconType: "", // 摄像机型号
        // transcribeType: "", // 录制方式
        // fillFormPerson: "", // 填表人
        zywcrYp: "", // 主要完成人员
        zywcrSp: "",
        zywcrDg: "",
        signYear: "", // 签字栏--年
        signMonth: "", // 签字栏--月
        signDay: "", // 签字栏--日
        option: "", // 意见
        optionYear: "", // 意见栏--年
        optionMonth: "", // 意见栏--月
        optionDay: "", // 意见栏--日
        remark: "", // 备注
      },
    };
  },
  methods:{
    empty(){
      this.reportData ={}
    }
  }
};
</script>

<style scoped>
.report_table {
  color: #444;
  /* color: #B8BABD; */
}
.report_title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-top: 8px;
}
.apply_video {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.apply_video >>> .ant-input {
  width: 240px;
  margin: 0 12px;
  border: 0;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
}
.apply_video >>> .ant-input:focus {
  box-shadow: none;
}
.table {
  margin-top: 10px;
  border: 1px solid #B8BABD;
  border-radius: 10px;
  margin: 30px;
}
.row,
.larger_row {
  border-bottom: 1px solid #B8BABD;
  display: flex;
  align-items: center;
}
.row .label {
  padding: 12px 0;
  border-right: 1px solid #B8BABD;
  width: 200px;
  text-align: center;
}
.row .value {
  flex: 1;
  display: flex;
  justify-content: center;
}
.larger_label {
  padding: 50px 0;
  border-right: 1px solid #B8BABD;
  width: 200px;
  text-align: center;
}
.larger_value {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cloum_value {
  display: flex;
  flex-direction: row;
}
.sign_box1 {
  height: 130px;
}
.margin20 {
  margin-left: 120px;
}
.margin21 {
  margin-left: 130px;
}
.larger_value >>> .ant-input {
  width: 500px;
}
.time_box >>> .ant-input {
  width: 60px;
}
.row:last-child,
.larger_row:last-child {
  border: 0;
}
.row .transcribe_unit {
  display: flex;
  align-items: center;
}
.transcribe_unit >>> .ant-input {
  width: 240px;
  border: 0;
  border-radius: 0;
}
.transcribe_unit >>> .ant-input:focus {
  box-shadow: none;
}
.larger_value >>> .ant-input {
  border: 0;
  border-radius: 0;
}
.larger_value >>> .ant-input:focus {
  box-shadow: none;
}
.left_box {
  writing-mode: tb-rl;
  letter-spacing: 20px;
  height: 276px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  border-bottom: 1px solid #B8BABD;
}
.input11 {
  width: 380px !important;
}
.right_box {
  flex: 1;
}
.textarea {
  height: 100% !important;
}
.small_label {
  padding: 12px 0;
  border-right: 1px solid #B8BABD;
  width: 160px;
  text-align: center;
}
.small_row {
  display: flex;
}
.row_item {
  display: flex;
  border-bottom: 1px solid #B8BABD;
}
.row_item .col {
  flex: 1;
  display: flex;
}
.col_label {
  padding: 12px 0;
  border-right: 1px solid #B8BABD;
  border-left: 1px solid #B8BABD;
  width: 160px;
  text-align: center;
}
.col_value {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.col_value span {
  width: 80px;
  padding-right: 20px;
}
.col_value >>> .ant-input {
  border: 0;
  border-radius: 0;
}
.col_value >>> .ant-input:focus {
  box-shadow: none;
}
.row >>> .ant-radio-wrapper:nth-child(2) {
  margin: 0 40px;
}
.zyry {
  display: flex;
  align-content: center;
  margin-left: 12px;
}
</style>
